<template>
  <div class="my">
    <van-nav-bar
      title="个人资料"
      left-text="返回"
      left-arrow
      @click-left="back"
    />
    <div class="myInfo">
      <van-cell title="头像">
        <template #extra>
          <div class="headImg">
            <img class="imgCover" :src="myInfo.userImg" />
          </div>
        </template>
      </van-cell>
      <van-cell title="用户ID" :value="myInfo.userId" />
      <van-cell title="昵称" :value="myInfo.nickName">
        <template #extra>
          <van-icon name="edit" @click="nick = true" />
        </template>
      </van-cell>
      <van-cell title="简介" :value="myInfo.desc? myInfo.desc : '暂无描述。'">
        <template #extra>
          <van-icon name="edit" @click="isDesc = true" />
        </template>
      </van-cell>
    </div>
    <div>
      <van-popup v-model="nick" position="bottom" closeable>
        <div class="edit">
          <h2>修改昵称</h2>
          <div class="inp">
            <van-field
              v-model="nickName"
              label="新昵称"
              placeholder="输入昵称(2-12位)"
            />
          </div>
          <div class="button">
            <van-button block color="#CC9145" @click="editNikeName"
              >保存</van-button
            >
          </div>
        </div>
      </van-popup>
      <van-popup v-model="isDesc" position="bottom" closeable>
        <div class="edit">
          <h2>修改简介</h2>
          <div class="inp">
            <van-field v-model="desc" label="新简介" placeholder="输入简介" />
          </div>
          <div class="button">
            <van-button block color="#CC9145" @click="editDesc"
              >保存</van-button
            >
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import "../assets/less/my.less";
import { utils } from "../assets/js/utils";
export default {
  name: "My",
  data() {
    return {
      isDesc: false,
      nick: false,
      nickName: "",
      desc: "",
      myInfo: {},
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    editNikeName() {
      let tokenString = this.$cookies.get("tokenString");
      if (!tokenString) {
        return this.$router.push({ name: "Login" });
      }
      this.$toast.loading({
        message: "加载中",
        forbidClick: true,
        duration: 0,
      });
      let nike = {
        nickName: {
          value: this.nickName,
          reg: /^[\u4e00-\u9fa5A-Za-z0-9]{1,11}$/,
          errorMsg: "昵称只支持汉字、字母和数字",
        },
      };
      if (!utils.validForm(nike)) {
        return;
      }
      this.$axios({
        method: "POST",
        url: "/updateNickName",
        data: {
          appkey: this.appkey,
          tokenString,
          nickName: this.nickName,
        },
      })
        .then((res) => {
          // console.log('res updateNickName ==> ', res);
          this.$toast.clear();

          if (res.data.code === "C001") {
            this.myInfo.nickName = this.nickName;
            this.nick = false;
          } else {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 1000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==> ", err);
        });
    },
    editDesc() {
      let tokenString = this.$cookies.get("tokenString");
      if (!tokenString) {
        return this.$router.push({ name: "Login" });
      }
      this.$toast.loading({
        message: "加载中",
        forbidClick: true,
        duration: 0,
      });
      this.$axios({
        method: "POST",
        url: "/updateDesc",
        data: {
          appkey: this.appkey,
          tokenString,
          desc: this.desc,
        },
      })
        .then((res) => {
          // console.log('res updateDesc ==> ', res);
          this.$toast.clear();

          if (res.data.code === "D001") {
            this.myInfo.desc = this.desc;
            this.isDesc = false;
          } else {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 1000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==> ", err);
        });
    },
    findAccountInfo() {
      let tokenString = this.$cookies.get("tokenString");
      if (!tokenString) {
        return this.$router.push({ name: "Login" });
      }
      this.$toast.loading({
        message: "加载中",
        forbidClick: true,
        duration: 0,
      });
      this.$axios({
        method: "GET",
        url: "/findAccountInfo",
        params: {
          appkey: this.appkey,
          tokenString,
        },
      })
        .then((res) => {
          // console.log('res findAccountInfo ==> ', res);
          this.$toast.clear();

          if (res.data.code === "B001") {
            this.myInfo = res.data.result[0];
            // console.log('this.myInfo==>',this.myInfo)
          } else {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 1000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==> ", err);
        });
    },
  },
  created() {
    this.findAccountInfo();
  },
};
</script>

<style lang="less" scoped>
</style>